<template>
  <el-dialog v-model="drawer" width="400px" title="选择待办人" :append-to-body="true" @close="close" custom-class="organizeTreeSelect">
    <el-form size="small" :model="form" :rules="rules" ref="ruleRefForm" label-width="100px">
        <el-form-item label="待办人" prop="user">
            <el-cascader v-model="form.user" :options="data" :props="props" clearable size="small" collapse-tags collapse-tags-tooltip popper-class="organizeTree-cascader" />
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">保存</el-button>
            <el-button size="small" type="default" @click="cancel(ruleRefForm)">取消</el-button>
        </el-row>
    </template> 
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue'
export default {
    name: 'OrganizeTreeSelect',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:dialogDrawer', 'onSubmit'],
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            props: {
                multiple: true
            },
            data: [{
                id: 1,
                label: 'Level 1',
                isPenultimate: false
            },
            {
                id: 2,
                label: 'Level 2',
                isPenultimate: false,
                children: [
                {
                    id: 5,
                    label: 'Level 2-1',
                    isPenultimate: false
                },
                {
                    id: 6,
                    label: 'Level 2-2',
                    isPenultimate: false
                },
                ],
            },
            {
                id: 3,
                label: 'Level 3',
                isPenultimate: false,
                children: [
                {
                    id: 7,
                    label: 'Level 3-1',
                    isPenultimate: false
                },
                {
                    id: 8,
                    label: 'Level 3-2',
                    isPenultimate: false
                },
                ],
            }],
            form: {
                user: []
            },
            rules: {
                user: [{ required: true, message: '请选择待办人', trigger: 'blur' }]
            }
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    context.emit('onSubmit', state.form.user)
                    context.emit('update:dialogDrawer', false)
                }
            })
        }
        const cancel = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        return {
            drawer,
            close,
            ruleRefForm,
            submitForm,
            cancel, 
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.organizeTreeSelect{
    .el-dialog__body{
        min-height: 150px;
    }
}
.organizeTree-cascader .el-checkbox{
    margin-right: 5px;
}
</style>